<script setup lang="ts">
import { deploy, migration, routine, modelManage } from "./modelTrain";
import {
  collectSetting,
  protocolConfig,
  resourceAccess
} from "./resourceAccess";
import { home } from "./home";
import { dynamicClean, offlineClean, metaFuse } from "./dataAssurance";
import { dispatchManage } from "./dispatchManage";
import { ref, reactive, watch, computed, nextTick } from "vue";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();

const route_arr = route.fullPath.split("/");

defineOptions({
  // name 作为一种规范最好必须写上并且和路由的name保持一致
  name: "QualityInspection"
});
const currentMenu = ref<string>("org");
const toComponent = ref(home);
const menuList = ref([
  { key: "appHome", name: "应用首页", show: true, component: home },
  { key: "appDeploy", name: "量化部署", show: true, component: deploy },
  { key: "appMigration", name: "迁移训练", show: true, component: migration },
  { key: "appRoutine", name: "常规训练", show: true, component: routine },
  {
    key: "appDynamicClean",
    name: "动态保障",
    show: true,
    component: dynamicClean
  },
  {
    key: "appOfflineClean",
    name: "离线清洗",
    show: true,
    component: offlineClean
  },
  { key: "appMetaFuse", name: "元数据融合", show: true, component: metaFuse },
  {
    key: "appCollectSetting",
    name: "采集设置",
    show: true,
    component: collectSetting
  },
  {
    key: "appProtocolConfig",
    name: "协议配置",
    show: true,
    component: protocolConfig
  },
  {
    key: "appResourceAccess",
    name: "资源接入",
    show: true,
    component: resourceAccess
  },
  {
    key: "appDispatchManage",
    name: "调度管理",
    show: true,
    component: dispatchManage
  },
  {
    key: "AppModelManage",
    name: "模型管理",
    show: true,
    component: modelManage
  }
  // 添加组件
]);

const page_key = ref(<string>"");
const category = ref(<string>"");

const thirdMenuItem1 = ref(null),
  thirdMenuItem2 = ref(null);
const subMenu1Item = ref(null);
const subMenu3Item = ref(null);

const isThird = ref(false);
const asideWidth = ref(160);
function menuClick(key: string) {
  page_key.value = key;
  menuList.value.filter((item: any) => {
    if (item.key == page_key.value) {
      currentMenu.value = key;
      // toComponent.value = item.component;
      // router.push({ name: key });
    }
  });

  // 如果点击的不是 "模型训练" | "资源接入"，则隐藏 isThird
  // 导航栏显示的逻辑
  if (
    page_key.value == "modelTrain" ||
    // page_key.value == "resourceAccess" ||
    page_key.value == "dataAssurance"
  ) {
    isThird.value = true;
    category.value = page_key.value;
    // 点击子菜单默认激活项目
    // if (page_key.value == "resourceAccess") {
    //   third_item.value = "/app/qualityInspection/resourceAccess/resourceAccess";
    // } else
    if (page_key.value == "modelTrain") {
      third_item.value = "/app/qualityInspection/modelTrain/routine";
    } else if (page_key.value == "dataAssurance") {
      third_item.value = "/app/qualityInspection/dataAssurance/metaFuse";
    }

    //是三级导航
  } else if (Judge_Third(page_key.value)) {
    //三级页面，什么都不做
    console.log("什么都不做");
  } else {
    //其他二级导航
    isThird.value = false;
  }
}
//写这个函数的目的在于，点三级页面的时候不要收起三级导航条，点二级页面的时候需要收起导航条
function Judge_Third(page_key: string) {
  const panelKeys = [
    //如果是三级页面的话要加到这个列表
    "resourceAccessContent",
    "protocolConfig",
    "collectSetting",
    "routine",
    "migration",
    "deploy",
    // 这里添加三级页面
    "modelManage",
    "metaFuse",
    "dynamicClean",
    "offlineClean"
  ];
  if (panelKeys.includes(page_key)) {
    return true;
  } else {
    return false;
  }
}

const handleOpen = (key: string, keyPath: string[]) => {
  isThird.value = false; //点击下拉导航栏的时候需要收起三级导航条
  // if (key == "/empty/resourceAccess") {
  //   subMenu1Item.value.$el.click();
  // } else if (key == "/empty/edgeCloud") {
  //   subMenu3Item.value.$el.click();
  // }
};
const handleClose = e => {
  console.log(e);
  isThird.value = false;
};
const sub_menu = `/${route_arr[1]}/${route_arr[2]}`;
const sub_menu_item = `/${route_arr[1]}/${route_arr[2]}/${route_arr[3]}`;
const third_item = ref("");
const initOP = async () => {
  if (
    route_arr[3] == "modelTrain" ||
    // route_arr[3] == "resourceAccess" ||
    route_arr[3] == "dataAssurance"
  ) {
    category.value = route_arr[3];
    await nextTick();
    isThird.value = true;
  }
  category.value = route_arr[3];
  if (route_arr[4]) {
    third_item.value = `/${route_arr[1]}/${route_arr[2]}/${route_arr[3]}/${route_arr[4]}`;
  }
};
initOP();

watch(
  () => isThird.value,
  (newVal, oldVal) => {
    if (isThird.value) {
      asideWidth.value += 120;
    } else {
      asideWidth.value -= 120;
    }
  }
);
import { useGlobal, isNumber } from "@pureadmin/utils";
const { $storage, $config } = useGlobal<GlobalPropertiesApi>();
const stretch = computed(() => {
  return $storage?.configure.stretch;
});
const getMainWidth = computed(() => {
  return isNumber(stretch.value)
    ? stretch.value + "px"
    : stretch.value
      ? "1440px"
      : "100%";
});
</script>

<template>
  <div>
    <el-container>
      <el-aside :width="asideWidth + 'px'">
        <div class="menu">
          <!-- menu_list -->
          <div class="w-[120px] text-center">
            <!-- <span
              class="text-[18px] h-[60px] leading-[60px] text-center font-weight:400px"
              >场景验证</span
            > -->
            <!-- 场景验证 -->
            <el-menu
              :router="true"
              class="menu_first"
              @open="handleOpen"
              @close="handleClose"
              :default-active="sub_menu_item"
              :default-openeds="[sub_menu]"
              :unique-opened="true"
            >
              <!-- 产品质量检测 -->
              <el-sub-menu
                index="/app/qualityInspection"
                expand-close-icon=" "
                expand-open-icon=" "
              >
                <template #title>
                  <div class="app-index-nav-title-1">
                    <span>产品质量检测</span>
                    <span>生产状态监控</span>
                  </div>
                </template>
                <div>
                  <el-menu-item
                    index="/app/qualityInspection/home"
                    @click="menuClick('home')"
                  >
                    应用首页
                  </el-menu-item>
                  <el-menu-item
                    index="/app/qualityInspection/resourceAccess"
                    @click="menuClick('resourceAccess')"
                  >
                    资源接入
                  </el-menu-item>
                  <el-menu-item
                    index="/app/qualityInspection/dataAssurance"
                    @click="menuClick('dataAssurance')"
                  >
                    数据保障
                  </el-menu-item>

                  <el-menu-item
                    index="/app/qualityInspection/modelTrain"
                    @click="menuClick('modelTrain')"
                  >
                    模型训练
                  </el-menu-item>
                  <el-menu-item
                    index="/app/qualityInspection/dispatchManage"
                    @click="menuClick('dispatchManage')"
                  >
                    调度管理
                  </el-menu-item>
                </div>
              </el-sub-menu>
            </el-menu>
          </div>
        </div>
        <!-- 三级页面导航条 -->
        <div
          class="h-screen bg-[#fff] overflow-hidden third_nav ml-auto"
          v-show="isThird"
        >
          <!-- 资源接入 -->
          <!-- <div v-show="category == 'resourceAccess'">
            <el-menu
              :default-active="route.fullPath"
              :router="true"
              class="third_menu"
              ><el-menu-item
                ref="thirdMenuItem1"
                index="/app/qualityInspection/resourceAccess/resourceAccess"
                class="third_menu_item"
                @click="menuClick('resourceAccessContent')"
              >
                资源接入
              </el-menu-item>
              <el-menu-item
                index="/app/qualityInspection/resourceAccess/protocolConfig"
                class="third_menu_item"
                @click="menuClick('protocolConfig')"
              >
                协议配置
              </el-menu-item>
              <el-menu-item
                index="/app/qualityInspection/resourceAccess/collectSetting"
                class="third_menu_item"
                @click="menuClick('collectSetting')"
              >
                采集设置
              </el-menu-item>
            </el-menu>
          </div> -->
          <!-- 模型训练 -->
          <div v-show="category == 'modelTrain'">
            <el-menu
              ref="thirdMenuItem2"
              :default-active="route.fullPath"
              :router="true"
              class="third_menu"
            >
              <el-menu-item
                index="/app/qualityInspection/modelTrain/routine"
                class="third_menu_item"
                @click="menuClick('routine')"
              >
                常规训练
              </el-menu-item>
              <el-menu-item
                index="/app/qualityInspection/modelTrain/migration"
                class="third_menu_item"
                @click="menuClick('migration')"
              >
                迁移训练
              </el-menu-item>
              <el-menu-item
                index="/app/qualityInspection/modelTrain/deploy"
                class="third_menu_item"
                @click="menuClick('deploy')"
              >
                量化部署
              </el-menu-item>
              <el-menu-item
                index="/app/qualityInspection/modelTrain/modelManage"
                class="third_menu_item"
                @click="menuClick('modelManage')" 
              >
                模型管理
              </el-menu-item>
            </el-menu>
          </div>
          <!-- 数据保障 -->
          <div v-show="category == 'dataAssurance'">
            <el-menu
              ref="thirdMenuItem3"
              :default-active="route.fullPath"
              :router="true"
              class="third_menu"
            >
              <el-menu-item
                index="/app/qualityInspection/dataAssurance/metaFuse"
                class="third_menu_item"
                @click="menuClick('metaFuse')"
              >
                元数据融合
              </el-menu-item>
              <el-menu-item
                index="/app/qualityInspection/dataAssurance/dynamicClean"
                class="third_menu_item"
                @click="menuClick('dynamicClean')"
              >
                动态保障
              </el-menu-item>
              <el-menu-item
                index="/app/qualityInspection/dataAssurance/offlineClean"
                class="third_menu_item"
                @click="menuClick('offlineClean')"
              >
                离线清洗
              </el-menu-item>
            </el-menu>
          </div>
        </div>
      </el-aside>
      <el-main class="h-screen empty-main">
        <!-- 调整页面的宽度 -->
        <div class="menu-component grow">
          <router-view v-slot="{ Component }">
            <keep-alive>
              <component :is="Component" />
            </keep-alive>
          </router-view>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<style lang="scss" scoped>
.empty-main {
  display: flex;
  background-color: rgb(244, 249, 255);
  overflow-x: hidden;
}
:deep(.el-card) {
  border-radius: 10px;
  box-shadow: 0 4px 8px 0 rgb(0 0 0 / 10%);
}
// 二级菜单
:deep(.sub-menu) {
  margin-bottom: 10px;
}
:deep(.el-sub-menu__title) {
  background-color: transparent !important;
  color: black !important;
  border-radius: 8px;
  font-size: 16px !important;
  margin-bottom: 10px !important;
}
:deep(.el-sub-menu.is-opened > .el-sub-menu__title) {
  background-color: rgb(52, 150, 246) !important;
  color: white !important;
}
:deep(.el-menu--vertical > .el-sub-menu.is-active.is-opened) {
  .el-sub-menu__title {
    background-color: rgb(52, 150, 246) !important;
    color: white !important;
    .el-icon {
      color: white !important;
    }
  }
}
:deep(.el-menu--vertical > .el-sub-menu.is-active) {
  .el-sub-menu__title {
    color: black !important;
    .el-icon {
      color: black !important;
    }
  }
}
:deep(.el-sub-menu > .el-menu--inline) {
  background-color: rgb(242, 243, 245) !important;
  // margin-top: 10px !important;
  border-radius: 8px;
  --el-menu-level: 0 !important;
  .el-menu-item {
    background-color: transparent !important;
    color: black !important;
    font-size: 16px !important;
  }
  .el-menu-item.is-active {
    color: rgb(12, 120, 225) !important;
    font-weight: bold !important;
  }
}
// 三级菜单,但与二级菜单又千丝万缕的联系
:deep(.el-menu-item) {
  background-color: transparent !important;
  color: black !important;
  font-size: 16px !important;
}
:deep(.el-menu.el-menu--vertical > .el-menu-item.is-active) {
  color: rgb(12, 120, 225) !important;
  font-weight: bold !important;
}

.menu {
  width: 160px;
  height: 100%;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  padding: 20px;
  background-color: #ffffff;
  border-right: 2px solid rgb(240, 244, 248);
}

.app-index-nav-title-1{
  height: 100%;
  width: 120px;
  margin-left: -20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  span{
    display: inline-block;
    text-align: center;
    height: 50%;
    width: 120px;
    line-height: 28px;
  }
}

:deep(.menu_first) {
  border-right: 0;
}
.third_nav {
  width: 120px;
  background-color: #ffffff;
  position: absolute;
  top: 0;
  left: 160px;
}
:deep(.third_menu) {
  margin-top: 100px;
  border: 0;
}
.tw {
  width: calc(100% - 280px);
  animation: closed 0.5s ease-in-out;
}
.grow {
  flex-grow: 1;
}
</style>
